<script>
  export default {
    data(){
      return {
        data: [
          {
            info: "派送成功",
            status: 7,
            time: "2025-02-07 12:33:33"
          },
          {
            info: "代收点",
            status: 6,
            time: "2025-02-07 11:33:33"
          },
          {
            info: "派送中",
            status: 0,
            time: "2025-02-07 10:33:33"
          },
        ]
      }
    }
  }
</script>

<template>
  <view class="container tn-safe-area-inset-bottom">
    <tn-nav-bar fixed>时间轴</tn-nav-bar>
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <tn-time-line>
        <block v-for="(v,k) in data" :key="k">
          <tn-time-line-item v-if="v.status != 0">
            <!-- 图标 -->
            <template slot="mode">
              <view class="timeline_mode">
                <view v-if="v.status === 7" class="timeline_icon tn-icon-success"></view>
                <view v-if="v.status === 6" class="timeline_icon tn-icon-cardbag"></view>
              </view>
            </template>
            <!-- 内容 -->
            <template slot="content">
              <view>
                <view class="timeline_info">{{v.info}}</view>
                <view class="timeline_itme">{{v.time}}</view>
              </view>
            </template>
          </tn-time-line-item>
          <tn-time-line-item v-else>
            <template slot="content">
              <view>
                <view class="timeline_info">{{v.info}}</view>
                <view class="timeline_itme">{{v.time}}</view>
              </view>
            </template>
          </tn-time-line-item>
        </block>
      </tn-time-line>
    </view>
    <view class="tn-padding-bottom-lg"></view>
  </view>
</template>

<style lang="scss" scoped>
  .container {
    background-color: $tn-bg-gray-color;
    min-height: 100vh;
  }
</style>